<template>
  <div class="department">
    <!-- 查询 -->
    <el-form :inline="true" :model="search" class="demo-form-inline">
      <el-form-item label="用户名称">
        <el-input v-model="search.userName" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="用户角色">
        <el-input v-model="search.roleName" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchUser" icon="el-icon-search"
          >查询</el-button
        >
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="reset" icon="el-icon-refresh-left"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <div style="display: flex">
      <!-- 新增按钮 -->
      <div
        v-has="'add'"
        class="add"
        @click="addDialog"
        style="text-align: left"
      >
        <el-button
          style="font-size: 15px"
          type="primary"
          icon="el-icon-circle-plus"
          >新增用户</el-button
        >
      </div>
      <!-- 批量删除 -->
      <div
        v-has="'del'"
        class="add"
        @click="batchDeleteDialog"
        style="text-align: left; margin-left: 10px"
      >
        <el-button
          style="font-size: 15px"
          type="primary"
          icon="el-icon-delete-solid"
          >批量删除</el-button
        >
      </div>
    </div>
    <!-- table表格 -->
    <el-table
      :data="tableData"
      stripe
      border
      empty-text="暂无数据"
      style="width: 100%"
      ref="multipleTable"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="num" width="75" label="序号"> </el-table-column>
      <el-table-column prop="userName" label="用户名称"> </el-table-column>
      <el-table-column prop="roleName" label="用户角色"> </el-table-column>
      <el-table-column prop="headPic" label="头像" sortable width="180">
        <!--插入图片链接的代码-->
        <template slot-scope="scope">
          <el-image
            :src="scope.row.headPic"
            alt=""
            style="width: 50px; height: 50px"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column label="账号状态">
        <template slot-scope="scope">
          <i
            :class="[
              scope.row.status == 1 ? 'el-icon-success' : 'el-icon-error',
            ]"
            :style="{ color: scope.row.status == 1 ? 'green' : 'red' }"
          ></i>
          <span style="margin-left: 5px">{{
            scope.row.status == 1 ? "正常" : "停用"
          }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="power" fixed="right" label="操作" width="160">
        <template slot-scope="scope">
          <div>
            <el-button
              v-has="'edit'"
              @click="editDialog(scope.row)"
              type="text"
              size="small"
              >编辑</el-button
            >
            <el-button
              v-has="'del'"
              @click="delDialog(scope.row)"
              type="text"
              size="small"
              >删除</el-button
            >
          </div>
          <!-- <div v-else style="color: red">无权限</div> -->
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      :current-page="page"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="count"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @current-change="changePage"
    >
    </el-pagination>
    <User @render="render" @getImage="getImage" ref="user"></User>
  </div>
</template>

<script>
import User from "@/components/setting/user.vue";
export default {
  components: { User },
  data() {
    return {
      img: null,
      title: "用户管理",
      count: 5,
      page: 1,
      total: null,
      power: "",
      currentPage4: 4,
      //查询
      search: {
        roleName: "",
        userName: "",
      },
      tableData: [],
    };
  },
  // computed: {
  //   img() {
  //     console.log(this.$refs.user, "父组件图片路径");
  //     console.log(this.$refs, "父组件图片路径1");
  //     // return this.$refs.user.imageUrl;
  //   },
  // },
  methods: {
    //获取图片
    getImage(v) {
      this.img = v;
      console.log(this.img, "图片");
    },
    //改变一页显示条数
    handleSizeChange(val) {
      this.count = val;
      this.render();
    },
    //条件查询
    searchUser() {
      this.$axios({
        url: `/queryUsersByCondition/${this.page}/${this.count}`,
        method: "get",
        params: {
          userName: this.search.userName,
          role: this.search.roleName,
        },
      }).then((res) => {
        console.log("search", this.search);
        console.log("查询成功", res.data.data);
        this.tableData = res.data.data;
        this.tableData.forEach((v, i) => {
          v.num = i + 1;
        });
        this.total = res.data.data.length;
      });
    },
    //重置
    reset() {
      this.search = {};
      this.render();
    },
    // 增加dialog
    addDialog() {
      this.$refs.user.dialogAddFormVisible = true;
    },
    // 修改dialog
    editDialog(msg) {
      this.$refs.user.dialogEditFormVisible = true;
      this.$axios({
        url: `/users/${msg.id}`,
      }).then((res) => {
        let editList = { ...msg };
        editList.status = editList.status.toString();
        editList.pwd = res.data.data.pwd;
        this.$refs.user.editData = editList;
      });
    },
    //删除dialog
    delDialog(msg) {
      this.$refs.user.dialogDelFormVisible = true;
      console.log(111, msg.id);
      this.$refs.user.delId = msg.id;
    },
    //批量删除dialog
    batchDeleteDialog(msg) {
      if (this.$refs.user.delIdArr.length == 0) {
        this.$message.error("至少要选中一项才能删除");
        return;
      }
      this.$refs.user.dialogBatchDelFormVisible = true;
    },
    // 批量删除操作
    handleSelectionChange(val) {
      let idArr = [];
      val.forEach((v) => {
        idArr.push(v.id);
      });
      this.$refs.user.delIdArr = idArr;
    },
    //改变页数
    changePage(page) {
      this.page = page;
      this.render();
    },
    //渲染
    render() {
      this.$axios({
        url: `/users/${this.page}/${this.count}`,
      }).then((res) => {
        console.log(res);
        if (res.status == 200) {
          this.tableData = res.data.data;
          this.total = Number(res.data.total);
          this.tableData.forEach((v, i) => {
            v.num = i + 1;
          });
          console.log(this.tableData);
        }
      });
    },
  },
  mounted() {
    this.power = this.$store.state.power;
    this.render();
    this.$emit("title", this.title);
  },
};
</script>

<style scoped lang="less">
/deep/.cell {
  text-align: center;
}
.department {
  padding: 40px;
}
.line {
  text-align: center;
}
.el-form {
  text-align: left;
  .el-input {
    width: 180px;
  }
  .el-button {
    padding: 5px 18px 5px 15px;
    height: 40px;
    color: #0a92fa;
    background: #fff;
    &:hover {
      color: #fff;
      background: #0a92fa;
    }
  }
}
.add {
  .el-button {
    padding: 5px 18px 5px 15px;
    height: 40px;
    color: #0a92fa;
    background: #fff;
    &:hover {
      color: #fff;
      background: #0a92fa;
    }
  }
}
.el-table {
  margin-top: 20px;
}
.el-pagination {
  margin-top: 50px;
}
</style>